<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">

  <xi:include href="master.html" />

<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
  <title>Log book</title>
  
   <script type="text/javascript" src="/js/jqgrid/jquery.jqGrid.js"></script>
   <link type="text/css" href="/js/jqgrid/css/ui.jqgrid.css" rel="Stylesheet" />
   <script type="text/javascript" src="/js/jquery.validate.js"></script>
   <script type="text/javascript" src="/js/jquery.delegate.js"></script>
   
  
  <style type="text/css">
	input.error { border: 1px solid red; }
	label.error {
		background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
		padding-left: 16px;
		margin-left: .3em;
	}
	label.valid {
		background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
		display: block;
		width: 16px;
		height: 16px;
	}

</style>
</head>

<body>
 <script type="text/javascript">
 function fastadd(){
	 if (!$("#commentForm").valid()) return false
		d = $("#add_date").val()
		date = d
		h =  $("#add_date_h").val()
		m =  $("#add_date_m").val()
		s =  $("#add_date_s").val()
		
		if (h != "") {date+=" "+h;
			if (m!='') {date+=":"+m
				if (s!='') date+=":"+s}}
		$.post("/logbook/add_dive", { date: date,
			duration:$("#add_duration").val(),
			greatestdepth:$("#add_greatestdepth").val(),
			lowesttemperature:$("#add_lowesttemperature").val(),
			notes:$("#add_notes").val()
			 } ,function (data){
				 $("#list_aaa").trigger("reloadGrid")
			}
			 );
		
  }
 function del(id){
	 if (!confirm("Are you sure you want to remove this item")) return
	 $.post("/logbook/del_dive", {id:id} ,function (data){
				 $("#list_aaa").trigger("reloadGrid")
			}
			 );
 }
jQuery(document).ready(function(){ 
  $("#list_aaa").jqGrid({
    url:'/logbook/list',
    datatype: 'json',
    mtype: 'GET',
    colNames:['Action','Date','Duration', 'Max Depth','Temperature','Notes'],
    colModel :[ 

	  {name:'action', index:'action', width:15, sortable:false},
      {name:'date', index:'date', width:50}, 
      {name:'duration', index:'duration', width:30}, 
      {name:'greatestdepth', index:'greatestdepth', width:30, align:'right'}, 
      {name:'lowesttemperature', index:'lowesttemperature', width:30, align:'right'},
      {name:'notes', index:'notes', align:'right',sortable:false,editable:true}
      ],
    pager:'#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'date',
    sortorder: "desc",
    viewrecords: true,
    height:350,
    autowidth: true, 
    imgpath: '/js/themes/steel/images'
  }) 
  $("#bedata").click(function(){ jQuery("#list_aaa").editGridRow('new',{height:280,reloadAfterSubmit:false}); });
  $("#commentForm").validate();
  $('#fast_add_dlg').dialog({autoOpen: false,modal:true,
	  buttons: {
		'Add': fastadd,
		Cancel: function() {
			$(this).dialog('close');
		}
	}

  })
  $("#add_date").datepicker({dateFormat: 'dd/mm/yy',showOn: 'button', buttonImage: '/images/calendar.gif', buttonImageOnly: true})
  $("#ui-datepicker-div").css("z-index",5000);
 	$('#fast_add').click(function(){
		$('#fast_add_dlg').dialog('open')
		})
}); 
</script>
<div id="fast_add_dlg" style="display: none;">
<form class="cmxform" id="commentForm" method="get" action="">
<p>
Date :<input id="add_date" style="width: 80px" class="required"></input>
   <input id="add_date_h" type="text" maxlength="2" style="width: 20px" />:
   <input id="add_date_m" maxlength="2" style="width: 20px"/>:
   <input id="add_date_s" maxlength="2" style="width: 20px"/><br/>
Duration :<input id="add_duration" size="3"/><br/>
Max Depth :<input id="add_greatestdepth" size="3"/><br/>
Temperature :<input id="add_lowesttemperature" size="3"/><br/>
Notes :<textarea id="add_notes" cols="10" rows="5"/><br/>
</p>
</form>
</div>
<button id="add_new"  onclick="window.location = '/logbook/add'" >Add</button>
<button id="fast_add"  >Fast Add</button>
 <table id="list_aaa" ><tbody ><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>
<div id="pager" class="scroll" style="text-align:center;"></div> 
</body>
</html>
